<!DOCTYPE html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <title>Selection</title>
  <script src="../platform/platform.js"></script>
  <link rel="import" href="core-selection.html">
</head>
<body unresolved>

  <polymer-element name="selection-example">
    <template>
      <style>
        polyfill-next-selector { content: 'ul > *'; }
        ::content > * {
          cursor: pointer;
        }

        polyfill-next-selector { content: 'ul > .selected'; }
        ::content > .selected {
          font-weight: bold;
          font-style: italic;
        }
      </style>

      <ul on-tap="{{itemTapAction}}">
        <content></content>
      </ul>

      <core-selection id="selection" multi on-core-select="{{selectAction}}"></core-selection>

    </template>
    <script>
    Polymer('selection-example', {
      itemTapAction: function(e, detail, sender) {
        this.$.selection.select(e.target);
      },
      selectAction: function(e, detail, sender) {
        detail.item.classList.toggle('selected', detail.isSelected);
      }
    });
    </script>
  </polymer-element>

  <selection-example>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
  </selection-example>
  
</body>
</html>
